<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 100px;
            border: 1px solid #000;
            display: flex;
            padding-left: 30px;
            flex-direction: column;
            justify-content: space-around;
            background: linear-gradient(pink,rgb(201, 225, 221));
        }

        span {
            display: inline-block;
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: aliceblue;
            background-color: rgb(185, 183, 183);
        }
    </style>
</head>

<body>
    <div class="box">
        <div>
            <span></span>
            <a href="#">看不清楚，点击更换</a>
        </div>
        <div> 验证码：<input type="text"></div>
        <div><button>确定</button></div>
    </div>

    <script>
        // 获取DOM
        const span = document.querySelector('span')
        const a = document.querySelector('a')
        const input = document.querySelector('input')
        const btn = document.querySelector('button')

        // 定义一个数组
        let arr = ['a', 'b', 'c', 'd', 'e', 'f', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
        // 从上面的数组中随机生成6位验证码,并封装成函数
        let str = ''
        function yanzheng() {
            for (let i = 0; i < 6; i++) {
                let num = Math.floor(Math.random() * (15 - 0))
                str += arr[num]
            }
        }
        yanzheng()

        // 将生成的验证码赋值给文本节点
        span.innerHTML = str

        // 点击更换时调用函数将验证码更换
        a.onclick = function () {
            str = ''
            yanzheng()
            span.innerHTML = str
        }

        // 点击确定按钮进行验证码校验
        btn.onclick = function () {
            if (input.value !== str) {
                confirm('验证码不正确！')
            }else{
             confirm('验证码正确！')
            }
            input.value = ''
        }


    </script>
</body>

</html>